<template>
    <div class="exam">
        <x-header :left-options="{showBack: false,backText:'作业'}" class="headerBox">倒计时 44:20
            <div slot="left" class="back" @click="onBack()"><x-icon type="ios-arrow-left" size="28"></x-icon>考试</div>
        </x-header>
        <div class='examCont clearfix'>
            <div class='testContent clearfix'>
                <div class='testContent-type'>诗词鉴赏</div>
                <div class='testContent-title'>
                    阅读下面的古诗文，完成相关问题。
                </div>
                <div class='testContent-det'>
                    <span>
                        咏柳<br/>唐 · 贺知章<br/>碧玉妆成一树高，万条垂下绿丝绦。<br/>不知细叶谁裁出，二月春风似剪刀。<br/> 【 注释】绦（TAO ) ：丝带。
                    </span>
                </div>
                <div class='testContent-que'>【小题1】一、二两句中，诗人用“碧玉”“绿丝绦”写出了早春杨柳的哪些特征？</div>
                <div class='testContent-que'>【小题2】 “二月春风似剪刀”是千古流传的名句，请你对这句诗作简要赏析。</div>
                <textarea placeholder="请输入" class='testContent-ans'> </textarea >
                <div class='next'><span>下一题</span></div>
            </div>
        </div>
        <!-- 底部按钮 -->
        <div class='submits'>
            <div class='submitBtn' @click="onSubmit()">
                <img src='../assets/images/examinationpaper02.png' />交卷
            </div>
            <div class='statistics'>
                <img src='../assets/images/subject02.png' />{{completeNum}}
                <span>/{{total}}</span>
            </div>
        </div>

        <!-- 交卷弹框 -->
        <x-dialog v-model="showSubmit" class="dialog-demo">
            <h3 class="pupTitle">考试交卷</h3>
            <template v-if="completeNum == total">
                <div style="width:120px;height:120px;margin: 20px auto;">
                    <x-circle
                        :percent="percent"
                        :stroke-width="5"
                        stroke-color="#04BE02" >
                        <p>当前考试进度</p>
                        <span class="color_green">{{total}}/{{total}}题</span>
                    </x-circle>
                </div>
                <div><icon type="waiting-circle" style="color:#999;"></icon>剩余时间：{{submitRestTime}}</div>
                <div class="pupBtns">
                    <span class="leftBtn" @click="onCancel()">再想一下</span>
                    <span class="rightBtn">交卷</span>
                </div>
            </template>

            <template v-else>
                <div style="width:120px;height:120px;margin: 20px auto;">
                    <x-circle
                        :percent="percent2"
                        :stroke-width="5"
                        stroke-color="#E35252">
                        <p>未做题</p>
                        <span class="color_red">{{total - completeNum}}题</span>
                    </x-circle>
                </div>
                <div><icon type="waiting-circle" style="color:#999;"></icon>剩余时间：{{submitRestTime}}</div>
                <div class="pupBtns">
                    <span class="leftBtn" @click="onCancel()">继续考试</span>
                    <span class="rightBtn">交卷</span>
                </div>
            </template>
        </x-dialog>

        <!-- 返回弹框 -->
        <x-dialog v-model="showBack" class="dialog-demo">
            <h3 class="pupTitle">考试交卷</h3>
            <div style="width:120px;height:120px;margin: 20px auto;">
                <x-circle
                    :percent="parseInt(percent3)"
                    :stroke-width="5"
                    stroke-color="#04BE02">
                    <p>当前考试进度</p>
                    <span class="color_green">{{completeNum}}/{{total}}题</span>
                </x-circle>
            </div>
            <div><icon type="waiting-circle" style="color:#999;"></icon>剩余时间：{{backRestTime}}</div>
            <div class="pupBtns">
                <span class="leftBtn" @click="onCancel()">继续考试</span>
                <span class="rightBtn">退出</span>
            </div>
        </x-dialog>
        

    </div>
</template>

<script>
    import { XHeader, Confirm, XCircle, Icon, XDialog } from "vux";
    export default {
        components: {
            XHeader,
            Confirm,
            XCircle,
            Icon,
            XDialog 
    },
    data(){
        return{
            completeNum: 5,
            total: 10,
            // 交卷弹框
            showSubmit: false,
            percent: 100,
            percent2: 100,
            submitRestTime: '10:55',
            // 返回弹框
            showBack:false,
            percent3: '',
            backRestTime: '10:55',
        }
    },
    mounted(){
        this.percent3 = (this.completeNum / this.total)*100
    },
    methods:{
        onSubmit() {
            this.showSubmit = !this.showSubmit;
        },
        onBack() {
            this.showBack = !this.showBack;
        },
        onCancel() {
            this.showSubmit = false
            this.showBack = false
        }
    }

    }
</script>

<style lang="less" scoped>
.exam{
    /deep/.headerBox {
    background-color: #fff;
    border-bottom: 1px solid #eee;
    .vux-header-left {
      left: 24px;
      .vux-header-back {
        color: #000;
      }
      .left-arrow:before {
        border-color: #000;
      }
    }
    .vux-header-title{
        color: #000;
        font-size: 30px;
    }
  }
  .back{
      color: #333;
    font-size: 30px;
    .vux-x-icon{
        vertical-align: middle;
    }
  }
    .pupTitle{
        padding-top: 20px;
    }
    .color_green{
        color:#04BE02;
    }
    .color_red{
        color:#E35252;
    }
    .pupBtns{
        margin-top: 20px;
        border-top: 1px solid #eee;
        display: flex;
        justify-content: space-around;
        font-size: 30px;
        .leftBtn{
            flex: 1;
            padding: 20px;
            color: #1F7AFF;
        }
        .rightBtn{
            flex: 1;
            padding: 20px;
            color: #47C45C;
            border-left: 1px solid #eee;
        }
    }
  
  /* 考试内容 */
  .clearfix{
        zoom:1;/*为IE6，7的兼容性设置*/
    }
    .clearfix::after{
        content:".";
        display:block;
        height:0;
        clear:both;
        visibility:hidden;
    }
    .examCont{
        background: #fff;
        padding: 30px;
        .testContent {
            width: 100%;
            font-size: 32px;
            padding-bottom:20px;
            .testContent-type {
                float: left;
                font-size: 22px;
                border: 2px solid #1f7aff;
                border-radius: 20px 0 20px 0;
                padding: 2px 15px;
                color: #1f7aff;
                margin-right:8px;
            }
            .testContent-title {
                font-size: 34px;
                /* line-height: 38px; */
                margin-top: -8px;
                height: 100px;
            }
            .testContent-det {
                text-align: center;
                margin-top: -40px;
                font-size: 32px;
                margin-bottom: 30px;
            }
            .testContent-que {
                margin: 10px 0;
            }
            .testContent-ans {
                width: 100%;
                height: 300px;
                box-sizing: border-box;
                border: 0;
                background-color: #edf0f5;
                padding: 30px;
                margin-top: 20px;
                border-radius: 20px;
            }
            .next{
                margin-top:90px;
                text-align:center;
                span{
                    padding:20px 100px;
                    background:#467EFE;
                    color:#fff;
                    border-radius:10px;
                    font-size: 30px;
                }
            }
            
        }
    }
    /* 底部按钮 */
    .submits{
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        display:flex;
        justify-content:space-between;
        align-items:center;
        padding: 30px;
        border-top: 1px solid #eee;
        background: #fff;
        .submitBtn{
            font-size:26px;
            img{
                width: 32px;
                height: 34px;
                vertical-align: middle;
                margin-right: 10px;
            }
        }
        .statistics{
            font-size:26px;
            img{
                width: 27px;
                height: 27px;
                vertical-align: middle;
                margin-right: 10px;
            }
            span{
                color: #999;
            }
        }
    }
}
</style>